<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5">
      <template #toolbar>
        <Authority :value="'admin.add'">
          <a-button type="primary" @click="handleCreate">新增账号</a-button>
        </Authority>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="[
            {
              label: '部门',
              auth: 'admin.dept',
              onClick: handleSetDept.bind(null, record),
            },
            {
              label: '角色',
              auth: 'admin.role',
              onClick: handleSetRole.bind(null, record),
            },
            {
              label: '菜单',
              auth: 'admin.view',
              onClick: handleSetView.bind(null, record),
            },
            {
              label: '接口',
              auth: 'admin.api',
              onClick: handleSetApi.bind(null, record),
            },
            {
              icon: 'clarity:note-edit-line',
              tooltip: '编辑用户资料',
              auth: 'admin.edit',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: '删除此账号',
              auth: 'admin.del',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]" />
        </template>
      </template>
    </BasicTable>
    <AccountModal @register="registerModal" @success="handleSuccess" />
    <SetDeptDrawer @register="registerSetDeptDrawer" @success="handleSuccess" />
    <SetRoleDrawer @register="registerSetRoleDrawer" @success="handleSuccess" />
    <SetApiDrawer @register="registerSetApiDrawer" @success="handleSuccess" />
    <SetViewDrawer @register="registerSetViewDrawer" @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { getAdminPage, removeAdmin } from '/@/api/system/admin';
import { PageWrapper } from '/@/components/Page';
import { Authority } from '/@/components/Authority';
import DeptTree from './DeptTree.vue';
import { useModal } from '/@/components/Modal';
import AccountModal from './AccountModal.vue';
import SetDeptDrawer from './SetDeptDrawer.vue';
import SetRoleDrawer from './SetRoleDrawer.vue';
import SetApiDrawer from './SetApiDrawer.vue';
import SetViewDrawer from './SetViewDrawer.vue';
import { columns, searchFormSchema } from './account.data';
import { useDrawer } from '/@/components/Drawer';

const [registerModal, { openModal }] = useModal();
const [registerSetDeptDrawer, setDeptMethods] = useDrawer();
const [registerSetRoleDrawer, setRoleMethods] = useDrawer();
const [registerSetApiDrawer, setApiMethods] = useDrawer();
const [registerSetViewDrawer, setViewMethods] = useDrawer();

const orgId = ref(0)
const searchInfo = computed(() => { return { orgId } });
function handleSelect(id = 0) {
  orgId.value = id
  reload();
}
const [registerTable, { reload }] = useTable({
  title: '账号列表',
  api: getAdminPage,
  titleHelpMessage: ['菜单、接口授权包含角色授权'],
  immediate: false,
  searchInfo: searchInfo,
  rowKey: 'id',
  columns,
  formConfig: {
    labelWidth: 50,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
  },
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  actionColumn: {
    width: 250,
    title: '操作',
    dataIndex: 'action'
  },
});

function handleCreate() {
  openModal(true, {
    isUpdate: false,
  });
}

function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
  });
}

async function handleDelete(record: Recordable) {
  await removeAdmin([record.id]);
  reload();
}

function handleSuccess() {
  reload();
}



function handleSetDept(record: Recordable) {
  setDeptMethods.openDrawer(true, {
    record,
    isUpdate: true,
  })
}
function handleSetRole(record: Recordable) {
  setRoleMethods.openDrawer(true, {
    record,
    isUpdate: true,
  })
}
function handleSetApi(record: Recordable) {
  setApiMethods.openDrawer(true, {
    record,
    isUpdate: true,
  })
}
function handleSetView(record: Recordable) {
  setViewMethods.openDrawer(true, {
    record,
    isUpdate: true,
  })
}
</script>
